<template>
    <Form>
      <Form.Item label="行插入权限校验">
        <Textarea v-model:value="model.insertCheck" placeholder="请输入行插入权限校验" />
      </Form.Item>
  
      <Form.Item label="列插入权限">
        <Select v-model:value="model.insertColumns" mode="multiple" placeholder="请选择列插入权限">
          <Select.Option v-for="field in fields" :key="field.name" :value="field.name">
            {{ field.name }}
          </Select.Option>
        </Select>
      </Form.Item>
  
      <Form.Item label="列预设">
        <Button type="primary" @click="$emit('addPreset')">新增列预设</Button>
      </Form.Item>
  
      <Table
        size="small"
        :columns="columns"
        :data-source="model.insertPresets"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operations'">
            <a @click="$emit('removePreset', record.key)">删除</a>
          </template>
          <template v-else-if="column.dataIndex === 'column'">
            <Select v-model:value="record.column" style="width: 100%;" placeholder="请选择列">
              <Select.Option v-for="field in fields" :key="field.name" :value="field.name">
                {{ field.name }}
              </Select.Option>
            </Select>
          </template>
          <template v-else-if="column.dataIndex === 'presetType'">
            <Select v-model:value="record.presetType" placeholder="请选择预设类型">
              <Select.Option value="static">静态值</Select.Option>
              <Select.Option value="from_session_value">从会话变量中获取</Select.Option>
            </Select>
          </template>
          <template v-else-if="column.dataIndex === 'presetValue'">
            <Input v-model:value="record.presetValue" placeholder="请输入预设值" />
          </template>
        </template>
      </Table>
    </Form>
  </template>
  
  <script setup>
  import { defineProps, ref } from 'vue';

  import { Button, Form, Input, Select, Table, Textarea } from 'ant-design-vue';

  const props = defineProps({
    model: { type: Object, required: true },
    fields: { type: Array, required: true },
    columns: { type: Array, required: true },
  });

  const columns = ref([
  {
    title: "列",
    dataIndex: "column",
    width: 200,
    key: "column",
  },
  {
    title: "预设类型",
    dataIndex: "presetType",
    width: 200,
    key: "presetType",
  },
  {
    title: "预设值",
    dataIndex: "presetValue",
    width: 200,
    key: "presetValue",
  },
  {
    title: "操作",
    dataIndex: "operations",
    width: 200,
    key: "operations",
  },
]);
  </script>
  